<script lang="ts" setup>
  import { ref, watch, computed } from 'vue';
  import { Card, Tabs, TabPane } from '@arco-design/web-vue';
  // import { queryPinList } from '/@/api/creator';
  // import { ApiManageList } from '/@/components/ApiManageList';
  import { useRouter } from 'vue-router';
  import { PageEnum } from '/@/enums/pageEnum';

  const router = useRouter();

  // 沸点状态
  const statusKey = ref('');
  const statusTabs = computed(() => {
    return [
      { title: '全部', key: 'all' },
      { title: '已发布', key: 'published' },
      { title: '未通过', key: 'rejected' },
    ];
  });
  const queryStatus = computed(() => {
    const { status } = router.currentRoute.value.query;
    return Array.isArray(status) ? status[0] : status;
  });
  watch(
    router.currentRoute,
    () => {
      if (router.currentRoute.value.path !== PageEnum.CREATOR_CONTENT_PINS) return;
      if (queryStatus.value && ['all', 'published', 'rejected'].includes(queryStatus.value)) {
        statusKey.value = queryStatus.value;
      } else {
        router.push({ query: { status: 'all' } });
      }
    },
    { immediate: true },
  );
  watch(statusKey, (status) => {
    if (router.currentRoute.value.path !== PageEnum.CREATOR_CONTENT_PINS) return;
    if (status !== queryStatus.value) {
      router.push({ query: { status } });
    }
  });

  // function onPinEdit(item) {
  //   window.open(`/pins/${item.id}`, '_blank');
  // }
</script>

<template>
  <Card>
    <Tabs class="mb-[14px]" size="large" hoverable>
      <TabPane title="沸点" :key="0">
        <Tabs type="text" v-model:activeKey="statusKey" lazyLoad>
          <TabPane :title="tab.title" v-for="tab in statusTabs" :key="tab.key">
            <!-- <ApiManageList
              :api="queryPinList"
              :params="{ status: tab.key }"
              :getLink="(item) => `/pins/${item.id}`"
              :dropdownActionsType="['delete']"
              @edit="onPinEdit"
            /> -->
          </TabPane>
        </Tabs>
      </TabPane>
    </Tabs>
  </Card>
</template>
